<template>
  <div class="baseInfoPage">
    <div class="back" @click="back()">
      <i class="el-icon-back"></i>返回
    </div>
    <el-form class="addForm" ref="form" :model="Form" :rules="rules" label-width="1.75rem">
      <div class="baseInfoTitle">完善用户信息</div>
      <el-form-item label="农场名称：" prop="baseName">
        <el-input v-model="Form.baseName"  placeholder="请输入农场名称"></el-input>
      </el-form-item>
      <el-form-item label="农场地址：" prop="baseAddr">
        <el-cascader
          v-model="Form.baseAddr"
          :options="provinceData"
          @change="handleChange"
          placeholder="请选择"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="详细地址">
        <el-input
          v-model="address"
          placeholder="请输入详细地址"
        ></el-input>
      </el-form-item>
      <el-form-item label="负责人员：" prop="baseLeader">
        <el-input v-model="Form.baseLeader" placeholder="请输入负责人员姓名"></el-input>
      </el-form-item>
      <el-form-item label="联系方式：" prop="phone">
        <el-input v-model="Form.phone" placeholder="请输入联系方式"></el-input>
      </el-form-item>
      <el-form-item class="add">
        <el-button
          class="editBtn"

          type="primary"
          @click="submit('form')"
          >进入农场</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import provinceData from '../../utils/city.json' // 引入省市区数据
import { addBaseInfoPageApi } from '@/api/baseInfo'
import { getUserListApi } from '@/api/dict'
import loadMap from '@/mxins/loadMap'

export default {
  mixins: [loadMap],
  data () {
    return {
      provinceData: this.formatData(provinceData), // 使用引入的省市区数据
      Form: {
        baseName: '',
        baseLeader: '',
        phone: '',
        baseAddr: []

      },
      address: '',
      edit: false,
      baseId: null,
      rules: {
        baseName: [
          { required: true, message: '请输入农场名称', trigger: 'blur' }
        ],
        baseLeader: [
          { required: true, message: '请输入负责人员', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系方式', trigger: 'blur' }
        ],
        baseAddr: [
          { required: true, message: '请选择农场地址', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    resultText () {
      this.Form.baseGeo = this.resultText
    }
  },
  mounted () {
  },
  methods: {
    back () {
      // this.$router.go(-1)
      this.$store.dispatch('user/logout')
      this.$router.push('/shuzhongtian/login')
    },
    handleChange (value, label) {
      const baseAddr = JSON.parse(JSON.stringify(this.Form.baseAddr))
      this.searchAddress(baseAddr.toString().replaceAll(',', ''))
    },
    // 提交表单
    submit (formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          this.edit = false
          this.Form.baseAddr = `${this.Form.baseAddr[0]},${this.Form.baseAddr[1]},${this.Form.baseAddr[2]},${this.address}`
          const res = await addBaseInfoPageApi(this.Form)
          if (res.code === 200) {
            this.$message.success('新增成功')
            this.$store.dispatch('user/updataBaseId', res.data)
            this.Form.baseId = res.data
            this.$store.dispatch('user/updataBaseData', this.Form)
            this.$router.push('/shuzhongtian')
          } else {
            this.$message('新增失败')
          }
        } else {
          // this.$message('错误提交')
        }
      })
    },
    // 用户列表
    async getUserList () {
      const res = await getUserListApi()
      console.log(res)
    },
    // 联机选择器 省市区
    formatData (data) {
      return data.map((province) => {
        return {
          value: province.name,
          label: province.name,
          children: province.cityList.map((city) => {
            return {
              value: city.name,
              label: city.name,
              children: city.areaList.map((area) => {
                return {
                  value: area.name,
                  label: area.name
                }
              })
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.baseInfoPage {
  width: 100%;
  height: 48.4375vw * 0.843;
  background: #ffffff;
  display: flex;
  justify-content: center;
  position: relative;
}
.back {
  position: absolute;
  left: 0;
  height: 6vh;
  line-height: 6vh;
  top: 0;
  border-bottom: 1px solid #EEEEEE;
  width: 100%;
  font-size: 0.8vw;
  .el-icon-back {
    margin-left: 1vw;
    margin-right: 0.3vw
  }
}
::v-deep .el-input__inner {
  width: 20vw !important;
  height: 2.8vw * 0.834;
}
::v-deep .el-textarea__inner {
  width: 30.6771vw !important;
}
::v-deep .el-form-item__label {
}
.infoBox {
  width: 30.6771vw;
  height: 3.125vw * 0.834;
  min-height: 3.125vw * 0.834;
  background: #edf1f4;
  border-radius: 12px 12px 12px 12px;
  padding-left: 1.25vw;
  line-height: 3.125vw * 0.834;
  font-size: 1.25vw;
  font-weight: 600;
  font-family: PingFangSC-Semibold, PingFang SC;
}
.baseDescr {
  width: 30.6771vw;
  min-height: 3.125vw * 0.834;
  background: #edf1f4;
  border-radius: 12px 12px 12px 12px;
  padding-left: 1.25vw;
  font-size: 1.25vw;
  line-height: 3.125vw * 0.834;
  font-weight: 600;
  font-family: PingFangSC-Semibold, PingFang SC;
}
.infoLink {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0px 0px 0px 0px;
}
.baseAddr {
  width: 30.6771vw;
  height: 3.125vw * 0.834;
  display: flex;
  // justify-content: space-between;
  font-family: PingFangSC-Semibold, PingFang SC;
  background: #edf1f4;
  padding-left: 1.25vw;
  font-size: 1vw;
  line-height: 3.125vw * 0.834;
  border-radius: 12px 12px 12px 12px;
  div {
    margin-right: 1.0417vw;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
  }
}
.editBtn {
  width: 19.7917vw * 0.834;
  height: 60px * 0.834;
  background: #00C586;
  border-radius: 3px;
  margin-top: 1.0417vw;
}
.baseInfoTitle {
  font-size: 1.2vw;
  text-align: center;
  margin: 15vh 0 4vh 0;
}
</style>
